<template>
	<!-- 首页搜索页面 -->
	<view v-if="isShow" class="search-page" :class="{show:isShow}">
		<uni-nav-bar >
			<view class="search-box flex-box">
				<view class="flex-box flex-item top-search">
					<image class="search-icon" src="../static/image/search/2.png" mode="widthFix"></image>
					<input type="text" class="flex-item" v-model="searchTxt" 
					:focus="isFocus" @input="getSearchSuggest" @confirm="addSearchHistory"/>
				</view>
				<view class="cancle" @click="close">
					取消
				</view>
			</view>
			<block slot="right">
				<image class="top-img" src="../static/image/search/1.png" mode="widthFix"></image>
			</block>
		</uni-nav-bar>
		<!-- 搜索页内容 -->
		<scroll-view scroll-y="true" class="page-content">
			<!-- 搜索框没有输入内容 -->
			<template v-if="!searchTxt.trim().length">
				<!-- 广告位 -->
				<image src="../static/image/search/s_03.png" mode="widthFix" class="top-ad"></image>
				<!-- 搜索历史 -->
				<view class="history-list" v-if="historyList.length>0">
					<view class="title-bar flex-box">
						<view class="title">
							搜索历史
						</view>
						<image @click="delHistoryList" src="../static/image/search/3.png" mode="widthFix" class="icon"></image>
					</view>
					<scroll-view scroll-x="true" class="list scroll-view">
						<view class="item" v-for="(item,index) in historyList" :key="index">
							<view class="desc">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 热搜榜单 -->
				<view class="hot-list">
					<view class="title-bar flex-box">
						<view class="title">
							热搜榜
						</view>
					</view>
					<view class="list">
						<view class="item flex-box" v-for="(item,index) in hotList" :key="index">
							<view class="num" :class="index<3?'on':''">
								{{index+1}}
							</view>
							<view class="flex-item">
								<view class="flex-box con">
									<view class="tit">
										{{item.searchWord}}
									</view>
									<view class="count">
										{{item.score}}
									</view>
									<image class="icon" :src="item.iconUrl" mode="widthFix"></image>
								</view>
								<view class="desc">
									{{item.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 搜索框输入了内容 -->
			<view class="suggest-list" v-if="searchTxt.trim().length">
				<view class="suggest">
					搜索{{searchTxt.trim()}}
				</view>
				<view class="item flex-box" v-for="(item,index) in suggestList" :key="index">
					<view class="icon iconfont">
						&#xe613;
					</view>
					<view class="word flex-item">
						{{item.keyword}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 防抖函数    debounce(方法,时长默认500)-------------------------------------------------------
	function debounce(fn,wait=500){
		var timeout = null
		return function(){
			// 如果已经在计时中清空重新开始计算时间
			if(timeout != null){
				clearTimeout(timeout)
			}
			timeout = setTimeout(fn,wait)
		}
	}
	
	import {apiGetSearchHot,apiSearchSuggest} from "@/apis/index.js"
	import uniNavBar from "../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				isShow:false,   	//是否显示
				searchTxt:'',		//搜索内容
				isFocus:false,		//控制光标是否显示
				historyList:[],		//搜索历史
				hotList:[],			//热搜榜
				suggestList:[],		//搜索列表
			}
		},
		components:{
			uniNavBar
		},
		created() {

		},
		methods: {
			// 搜索列表接口
			// 使用防抖函数,并且用_this改变指向-------------------------------------------------
			getSearchSuggest:debounce(()=>{
				if(this.searchTxt.trim()){//输入框有内容才请求
					const params = {
						type:"mobile",
						keywords:this.searchTxt.trim()
					}
					apiSearchSuggest(params).then(res=>{
						this.suggestList = res.data.result.allMatch || []
					})
				}
			},600).bind(window),   //bind改变this方向,使this指向window
			// 记录搜索历史
			addSearchHistory(){
				const txt = this.searchTxt.trim()
				if(txt){
					// 检查是否存在
					const tempIndex = this.historyList.includes(txt)
					if(tempIndex == false){
						// 只显示四个,超过长度就删除最旧的
						if(this.historyList.length>3){
							this.historyList.pop()
						}
						// 添加新的
						this.historyList.unshift(txt)
						// 持久化存储防止刷新就没
						uni.setStorageSync("searchList",JSON.stringify(this.historyList))
					}
				}
			},
			// 从缓存读取搜索历史
			getHistoryList(){
				let val = JSON.parse(uni.getStorageSync("searchList"))
				if(val) {
					this.historyList  = val
				}
			},
			// 热搜接口
			getGetSearchHot(){
				let self = this
				if(self.hotList.length>0){//有数据就不查了
					return false
				}
				apiGetSearchHot().then(res=>{
					self.hotList = res.data.data || []
				})
			},
			// 清除搜索历史按钮
			delHistoryList(){
				let self = this
				uni.showModal({
					title:"确认清除搜索历史吗?",
					success: (res) => {
						// 点击确认按钮就处理,取消则不理
						if(res.confirm){	
							self.historyList = []
							// 把缓存清空
							uni.setStorageSync("searchList","")
						}
					}
				})
			},
			// 打开搜索页
			open(){
				this.isShow = true
				this.isFocus = true
				this.getGetSearchHot()
				this.getHistoryList()
			},
			// 关闭搜索页
			close(){
				this.searchTxt = ''
				this.isShow = false
				this.isFocus = false
				this.$emit("closeSearch")
			}
		}
	}
</script>

<style lang="scss">
.search-page{
		position:absolute;
		top:0;
		left:-20rpx;
		width:100%;
		background: #fff;
		min-height:100%;
		transition: transform 0.1s;
		transform: translateX(100%);
		z-index: 100;
		&.show{
			transform: translateX(0)
		}
	}
.search-box{
	width:530rpx;
	margin-left: -20rpx;
	/* #ifdef MP-WEIXIN */
	/* #endif */
	align-items: center;
	.cancle{
		width:70rpx;
		// margin-left: 2rpx;
		margin-right: 59rpx;
		font-size: 34rpx;
		color:#000;
	}
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	// margin-top: 10rpx;
}
.top-search {
	width: 500rpx;
	height: 72rpx;
	padding: 0 10rpx;
	// padding-top:15rpx;
	// margin-left: -30rpx;
	// margin-right: 24rpx;
	border-radius: 72rpx;
	color: #333;
	background: #f7f7f7;
	align-items: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
	
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
}
.top-ad{
	display:block;
	width:686rpx;
	height:110rpx;
	margin: 24rpx auto 0;
}
.history-list {
	padding-top:14rpx;
	.list {
		height: 106rpx;
		padding-top:20rpx;
		margin-bottom: 30rpx;
		white-space: nowrap;
		.item {
			position: relative;
			display: inline-block;
			height: 64rpx;
			padding:0 30rpx;
			margin-right:20rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 64rpx;
			color:#323232;
			background: #f8f8f8;
			&:first-child{
				margin-left:40rpx;
			}
		}
	}
}
.title-bar{
	height:68rpx;
	padding: 0 36rpx;
	justify-content: space-between;
	align-items:center;
	font-size: 26rpx;
	font-weight: 600;
	color:#333;
	.icon{
		width:36rpx;
		height:36rpx;
		margin-right:10rpx;
	}
}
.hot-list{
	.item{
		align-items: center;
		height:120rpx;
	}
	.con{
		align-items: center;
	}
	.num{
		width:84rpx;
		text-align: center;
		line-height: 120rpx;
		color:#999;
		font-size: 24rpx;
		font-weight: 600;
		&.on{
			color:#ff3a3a;
		}
	}
	.tit{
		margin-right:20rpx;
		color:#333;
		line-height: 48rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.count{
		margin-right:20rpx;
		color:#ccc;
		line-height: 48rpx;
		font-size: 24rpx;
		transform: scale(0.84);
	}
	.icon{
		width:56rpx;
		height:20rpx;
	}
	.desc{
		color:#999;
		font-size: 24rpx;
		line-height: 40rpx;
	}
}
.suggest-list{
	.suggest{
		position:relative;
		height:96rpx;
		margin-left:32rpx;
		line-height:96rpx;
		color:#6578a0;
		&:before{
			position:absolute;
			content: '';
			right:0;
			bottom:0;
			width:100%;
			border-top: 1px solid #e6e6e6;
			transform: scaleY(0.5);
		}
	}
	.item{
		height:90rpx;
		line-height: 90rpx;
		color:#222;
	}
	.icon{
		width:72rpx;
		color:#aaa;
		text-align:center;
	}
	.word{
		position:relative;
		&:before{
			position:absolute;
			content: '';
			right:0;
			bottom:0;
			width:100%;
			border-top: 1px solid #e6e6e6;
			transform: scaleY(0.5);
		}
	}
}
</style>
